<template>
    <a-card class="general-card">
        <template #title>
          <a-row class="grid-demo">
            <a-col :span="2">
              <span>{{title}}</span>
            </a-col>
            <a-col :span="2" :offset="18">
              <a-button type="primary" status="success" @click="outExcleFun">导出</a-button>
            </a-col>
            <a-col :span="2" v-if="printVisable">
              <a-button type="primary" status="success" @click="printFun">打印</a-button>
            </a-col>
          </a-row>
        </template>

        <div v-if="sendWorkTabel" class="sfCte" v-for="(item,index) in sendWorkTabel" :key="index">
          <div v-if="item.list" class="title">工序</div>
          <a-descriptions v-if="item.list"  :column="{ xs: 3, sm: 3, md: 4, lg: 5 }">
                <a-descriptions-item v-for="itemval of item.list" :label="itemval.label" :span="itemval.span ?? 1">
                    <a-tag v-if="itemval.value">{{ itemval.value }}</a-tag>
                </a-descriptions-item>
            </a-descriptions>
          <div  v-if="item.sonList" class="title">子工序</div>
          <a-descriptions  v-if="item.sonList" column="4">
            <a-descriptions-item v-for="itemval of item.sonList" :label="itemval.label" :span="itemval.span ?? 1">
              <a-tag v-if="itemval.value">{{ itemval.value }}</a-tag>
            </a-descriptions-item>
          </a-descriptions>
        </div>
    </a-card>
  </template>

  <script lang="ts">
  import { toRefs } from 'vue';
  import importConfig from './querySfCteModel.ts';

  export default {

    setup() {
      const {
        base,
        outExcleFun,
        printFun,
      } = importConfig();
      return {
       ...toRefs(base),
       outExcleFun,
       printFun,
      };
    },
  };
  </script>

  <style lang="less" scoped>
  .general-card-option{
    text-align: right;
  }
  .sfCte{
    // display: flex;
    // width: 800px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 20px;

    :deep(.arco-descriptions-title){
        display: flex;
        justify-content: space-between
    }
    &-title{
        // text-align: left;
        font-weight: 600;
    }


  }
  .sfCte:last-child{
    border-bottom: none;
  }

  .title{
    width: 100%;
    text-align: left;
    font-size: 17px;
    font-weight: 500;
    border-bottom: 1px solid #ccc;
    padding-bottom: 6px;
    margin-bottom: 18px;
  }
  </style>
